<template>
  <view class="u-p-t-20 main-pd">
    <HeadTitle title="待缴账单" />
    <view class="u-card jf-msg" v-for="item in djzd" :key="item.id">
      <view class="item">
        <view class="u-flex">
          <view>姓&emsp;&emsp;名：</view>
          <view>{{ item.yzName || "" }}</view>
        </view>
      </view>
      <view class="item">
        <view class="u-flex">
          <view>费用类型：</view>
          <view>{{ item.type || "" }}</view>
        </view>
      </view>
      <view class="item">
        <view class="u-flex">
          <view>应缴金额：</view>
          <view>{{ item.orderMoney || 0 }}元</view>
        </view>
      </view>
      <view class="item">
        <view class="u-flex">
          <view class="w-200">服务时间：</view>
          <view>{{ item.fwStartDate || "" }} 至 {{ item.fwEndDate }}</view>
        </view>
      </view>
      <view class="item">
        <view class="u-flex">
          <view class="w-200">缴费时间：</view>
          <view>{{ item.jfStartTime || "" }} 至 {{ item.jfEndTime }}</view>
        </view>
      </view>
      <view class="u-m-t-40">
        <u-button
          text="去缴费"
          color="linear-gradient(90deg, #FA827D 0%, #F34B47 100%)"
          :customStyle="{
            fontSize: '28rpx',
            height: '72rpx',
          }"
          @click="goPay(item.id)"></u-button>
      </view>
    </view>
    <view class="u-m-t-32">
      <HeadTitle title="缴费记录" />
      <view class="u-card jf-msg" v-for="item in jfzd" :key="item.id">
        <view class="item">
          <view class="u-flex">
            <view>姓&emsp;&emsp;名：</view>
            <view>{{ item.yzName }}</view>
          </view>
        </view>
        <view class="item">
          <view class="u-flex">
            <view>费用类型：</view>
            <view>{{ item.type }}</view>
          </view>
        </view>
        <view class="item">
          <view class="u-flex">
            <view>应缴金额：</view>
            <view>{{ item.orderMoney }}</view>
          </view>
        </view>
        <view class="item">
          <view class="u-flex">
            <view class="w-180">服务时间：</view>
            <view>{{ item.fwStartDate }} 至 {{ item.fwEndDate }}</view>
          </view>
        </view>
        <view class="item">
          <view class="u-flex">
            <view class="w-180">缴费时间：</view>
            <view>{{ item.jfStartTime }} 至 {{ item.jfEndTime }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import HeadTitle from "@/components/HeadTitle.vue";
import { getqtfyListApi, payApi, getqtfyJlListApi } from "@/api/index";
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import useInfoStore from "@/store/user";
const userStore = useInfoStore();
let djzd = ref([]);
let jfzd = ref([]);
const getdjzdListHandle = () => {
  getqtfyListApi({
    dzyzkId: userStore.dzyzkId,
  }).then((res) => {
    if (res.success) {
      djzd.value = res.data;
    }
  });
};
const goPay = (id) => {
  payApi({
    id,
    openId: userStore.openId,
  }).then((res) => {
    if (res.success) {
      let resData = res.data;
      wx.requestPayment({
        timeStamp: resData.timeStamp, //后端返回的时间戳
        nonceStr: resData.nonceStr, //后端返回的随机字符串
        package: resData.package, //后端返回的prepay_id
        signType: resData.signType, //后端签名算法,根据后端来,后端MD5这里即为MD5
        paySign: resData.paySign, //后端返回的签名
        success(res) {
          console.log("res: ", res);
          if (res.errMsg == "requestPayment:fail cancel") {
            uni.$u.toast("用户取消支付");
            return false;
          }
          getdjzdListHandle();
          getqtfyJlListHandle();
        },
        fail(res) {
          console.log("res: ", res);

          //
          uni.$u.toast("支付失败");
        },
      });
    } else {
      uni.$u.toast(res.msg);
      return false;
    }
  });
};
const getqtfyJlListHandle = () => {
  getqtfyJlListApi({
    dzyzkId: userStore.dzyzkId,
  }).then((res) => {
    if (res.success) {
      jfzd.value = res.data;
    }
  });
};
onLoad(() => {
  getdjzdListHandle();
  getqtfyJlListHandle();
});
</script>

<style lang="scss" scoped>
.jf-msg {
  font-size: 28rpx;
  color: #595959;
  margin-bottom: 20rpx;
  .item {
    margin-bottom: 16rpx;
  }
}
.label {
  width: 200rpx;
}
</style>
